<template>
    <div class="loan-out-success">
        
        <div class="header">
            <img src="../images/success2.png" width="96" alt="">
            <p class='font-subhead'>出借信息发布成功</p>
        </div>

        <div class="card nail5" v-if='hasDetail'>
            <p class='loan-number'>出借编号: {{lendNo}}</p>
            <div class="card__header no-border">
                <div class="loan-money">
                    <p class="loan-money__info loan-out">可借额度</p>
                </div>
                <p class="loan-money__amount purple">{{detail.lendAmountFrom | toYuan}}～{{detail.lendAmountTo | toYuan}}元</p>
            </div>
            <ul class="loan-out-info">
                <li class="loan-out-info__item" v-if='detail.daysType == "DAY"'>
                    <p>{{daysTransform(detail.lendDaysFrom,detail.lendDaysTo,'day')}}</p>
                    <span>可借时长</span>
                </li>
                <li class="loan-out-info__item" v-else>
                    <p>{{daysTransform(detail.lendDaysFrom,detail.lendDaysTo,'period')}}</p>
                    <span>可借时长</span>
                </li>
                <li class="loan-out-info__item">
                    <p>{{detail.yearRate / 100}}%</p>
                    <span>年利率</span>
                </li>
                <li class="loan-out-info__item">
                    <p>{{detail.serviceFeeRate / 100}}% | {{detail.serviceFee | toYuan}}元</p>
                    <span>服务费</span>
                </li>
            </ul>
            <div class="card__buttons">
                <span class='card__button button short transparent' @click='goDetailMe(lendNo)'>查看详情</span>
                <span class='card__button button short purple' @click='showShare'>分享借款</span>
            </div>
        </div>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import countDown from '../components/CountDown.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loanOutApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            countDown,
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                lendNo:this.$route.params.no,
                detail:{}
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            hasDetail(){
                return !_.isEmpty(this.detail)
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'showShare',
                'setShare'
            ]),


            // function

            share(item){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search

                let realUrl = `${protocol}//${host}${pathname}${search}#share-loan-out/${item.lendNo}`
                let days

                if(item.daysType == 'DAY'){
                    days = this.daysTransform(item.lendDaysFrom,item.lendDaysTo,'day')
                }
                else{
                    days = this.daysTransform(item.lendDaysFrom,item.lendDaysTo,'period')
                }
                this.setShare({
                    message:{
                        title: '要用钱？找我！我在有借放款，安全可靠，放款快，赶紧来啊！ ', // 分享标题
                        desc: `金额: ${toYuan(item.lendAmountFrom)}-${toYuan(item.lendAmountTo)},时长: ${days}, 利率: ${(item.yearRate / 100).toFixed(2)}%`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () { 

                        },
                        cancel: function () { 

                        }
                    },
                    timeline:{
                        title: '要用钱？找我！我在有借放款，安全可靠，放款快，赶紧来啊！', // 分享标题
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                    qq:{
                        title: '要用钱？找我！我在有借放款，安全可靠，放款快，赶紧来啊！', // 分享标题
                        desc: `金额: ${toYuan(item.lendAmountFrom)}-${toYuan(item.lendAmountTo)},时长: ${days}, 利率: ${(item.yearRate / 100).toFixed(2)}%`, // 分享描述
                        link: realUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: 'https://youjie.kongapi.com/pic/loading_1.png', // 分享图标
                        success: function () { 
                            
                        },
                        cancel: function () { 

                        }
                    },
                })
            },
            daysTransform(from,to,type){
                let suffix
                let fromStr = from
                let toStr = to

                if(type == 'day') suffix = '天'
                else suffix = '期'

                if(from >= 30 && type == 'day'){
                    suffix = '个月'
                    fromStr = from / 30 
                    toStr = to / 30 

                }
                if(from == to){
                    return fromStr + suffix
                }
                else{
                    return fromStr + suffix + '~' + toStr + suffix
                }
            },
            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                let diffTime = diff.diff(now)
                if(diffDays <= 0) return true
                return diffDays
                return true
            },
            goDetailMe(number){
                this.$router.push({
                    name:'loan-out-detail-me',
                    params:{
                        number:number
                    }
                })
            },
            getDetail(item){
                this.showLoading()
                loanOutApi.detailOther({
                    lendNo:this.lendNo
                })
                .then(result=>{
                    this.detail = result
                    this.share(result)
                    this.hideLoading()
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){
            
            this.getDetail()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-out-success{
        .header{
            text-align: center;
            padding-bottom: 32px;
            img{
                padding-top: 48px;
            }
            .font-subhead{
                padding-top: 16px;
                color:$importColor;
            }
        }
    }
</style>
